<style scoped lang="stylus" type="text/stylus">
#checkPage {
  width: 100%;
  height: 100%;

  .checkList {
    position: relative;
    width: calc(100% - 180px);
    height: 100%;
    margin: 0 auto;

    .checkListHeader {
      position: relative;
      width: 100%;
      height: 80px;
      padding: 30px 0 10px 0;
      z-index: 1;

      .checkListHeaderCo {
        >li {
          float: left;
          margin-left: 5px;
        }

        .lastChild {
          float: right;
        }
      }
    }

    .checkContentListInfo01 {
      width: 100%;
      height: 40px;
      line-height: 40px;
      margin-bottom: 2px;
      background-color: #e5e5e5;

      .recordList {
        width: 100%;
        height: 100%;

        >li {
          float: left;
          text-align: center;
        }

        .serialNumber {
          width: 4%;
        }

        .companyName {
          width: 25%;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
          cursor: pointer;
        }

        .checkStatus {
          width: 8%;
        }

        .checkMan {
          width: 20%;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }

        .checkTime {
          width: 20%;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }

        .checkMaterials {
          width: 17%;
        }

        .remark {
          width: 6%;
          cursor pointer
        }
      }
    }

    .checkListContent {
      position: relative;
      width: 100%;
      height: calc(100% - 165px);
      margin-bottom 5px

      .checkContentList {
        position: relative;
        overflow: hidden;

        .checkContentListInfo {
          position relative
          width: 100%;
          overflow hidden
          padding 5px 0
          margin-bottom: 2px;
          background-color: #e5e5e5;

          .recordList {
            width: 100%;
            height: 100%;

            >li {
              float: left;
              text-align: center;
            }

            .serialNumber {
              width: 4%;
            }

            .companyName {
              width: 25%;
              text-overflow: ellipsis;
              overflow: hidden;
              white-space: nowrap;
              cursor: pointer;
              &:hover {
                color #2d8cf0
              }
            }

            .checkStatus {
              width: 8%;
            }

            .checkMan {
              width: 20%;
              text-overflow: ellipsis;
              overflow: hidden;
              white-space: nowrap;
            }

            .checkTime {
              width: 20%;
              text-overflow: ellipsis;
              overflow: hidden;
              white-space: nowrap;
            }

            .checkMaterials {
              width: 17%;
              white-space: wrap;
              .checkMaterialsList {
                .checkMaterialsInfo {
                  cursor pointer
                  &:hover {
                    color #2d8cf0
                  }
                }
              }
            }

            .remark {
              width: 6%;
              float right
              > span {
                cursor pointer
                &:hover {
                  color #2d8cf0
                }
              }
            }
          }
        }
      }
    }
    .PageStyle {
      text-align center
    }
  }
}
</style>

<template>
  <div id="checkPage">
    <div class="checkList">
      <div class="checkListHeader">
        <ul class="checkListHeaderCo">
          <li>
            <span>查询条件：</span>
            <Input v-model="company1" placeholder="输入企业名称" style="width: 100px"></Input>
          </li>
          <li>
            <span>审核状态：</span>
            <Select v-model="model1" style="width:100px">
                <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
            <span>&nbsp;&nbsp;时间查询：</span>
          </li>
          <li>
            <Col span="12">
                <DatePicker :value="time1" format="yyyy-MM-dd" type="daterange" placement="bottom" placeholder="选择时间段" @on-change="getDateValue" style="width: 300px"></DatePicker>
            </Col>
          </li>
          <li class="lastChild">
            <Button @click="searchCheck()" type="primary">查询</Button>
          </li>
        </ul>
      </div>
      
      <div class="checkContentListInfo01">
        <ul class="recordList">
          <li class="serialNumber">序号</li>
          <li class="companyName">企业名称</li>
          <li class="checkStatus">审核状态</li>
          <li class="checkMan">审核者</li>
          <li class="checkTime">审核时间</li>
          <li class="checkMaterials">审核材料</li>
          <li class="remark">备注</li>
        </ul>
      </div>
      <VuePerfectScrollbar class="checkListContent">
        <ul class="checkContentList">
          <li class="checkContentListInfo" v-for="(check,checkIndex) in checkInfoData" :key="checkIndex">
            <ul class="recordList">
              <li class="serialNumber">{{checkIndex + 1}}</li>
              <li @click="getCompanyData(check.companyId)" class="companyName">{{check.selectCompanyName}}</li>
              <li class="checkStatus">{{check.auditorStatus}}</li>
              <li class="checkMan">{{check.auditorName}}</li>
              <li class="checkTime">{{check.auditorDate}}</li>
              <li class="checkMaterials">
                <ul class="checkMaterialsList">
                  <li class="checkMaterialsInfo" @click="getFiles(file.filePath)" v-for="(file,fileIndex) in check.files" :key="fileIndex">
                    {{file.fileName}}
                  </li>
                </ul>
              </li>
              <li class="remark">
                <span v-if="check.auditorStatus == '拒绝'" @click="showAuditorReason(check.remarks)">拒绝理由</span>
              </li>
            </ul>
          </li>
        </ul>
      </VuePerfectScrollbar>
      <Modal
          v-model="companyInfoModal"
          title="企业详细信息"
          @on-ok="ok"
          @on-cancel="cancel">
          <div class="info">
            <h2 class="number">企业统一社会信用代码：{{targetCompanyData.orgCode}}</h2>
            <div class="number" v-if='targetCompanyData.chairman'>
              <h2 class="linkman">董事长姓名：{{targetCompanyData.chairman}}</h2>
              <h2 class="mobile">联系方式：{{targetCompanyData.chairmanPhone}}</h2>
            </div>
            <div class="number" v-if='targetCompanyData.generalManager'>
              <h2 class="linkman">总经理姓名：{{targetCompanyData.generalManager}}</h2>
              <h2 class="mobile">联系方式：{{targetCompanyData.generalManagerPhone}}</h2>
            </div>
            <div class="number" v-if='targetCompanyData.legalPersonName'>
              <h2 class="linkman">法人姓名：{{targetCompanyData.legalPersonName}}</h2>
              <h2 class="mobile">联系方式： {{targetCompanyData.legalPersonPhone}}</h2>
            </div>
          </div>
      </Modal>
      <Modal
          v-model="auditorReasonModel"
          title="拒绝理由"
          @on-ok="ok"
          @on-cancel="cancel">
          <div class="info">
            {{auditorReasonData}}
          </div>
      </Modal>
      <Page :total="totalCount" :page-size="pageSize" show-elevator show-total @on-change="handlePage" @on-page-size-change="handlePageSize" :current="pageNum" class="PageStyle"></Page>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  name: "checkInfo",
  data() {
    return {
      checkInfoData: {}, // 审核记录数据
      cityList: [
        {
          value: "全部",
          label: "全部"
        },
        {
          value: "通过",
          label: "通过"
        },
        {
          value: "拒绝",
          label: "拒绝"
        }
      ],
      model1: "", // 输入框展示内容
      time1: "", // 日期选择器展示时间
      company1: "", // 筛选企业名称
      startDate: "", // 筛选时间--开始时间
      endDate: "", // 筛选时间--截止时间
      targetCompanyData: {}, // 企业数据
      companyInfoModal: false, // 企业信息展示弹框控制
      auditorReasonModel: false, // 拒绝理由展示弹框控制
      auditorReasonData:'', // 拒绝理由
      pageSize:1,
      pageNum: 1,
      totalCount: 0
    };
  },
  computed: {
    PageStyle(){
      return 
    }
  },
  methods: {
    //获取用户选择的日期
    getDateValue(value) {
      if (value[0] != "") {
        this.startDate = new Date(value[0]).getTime();
        this.endDate = new Date(value[1]).getTime();
      } else {
        this.startDate = "";
        this.endDate = "";
      }
    },
    // 获取审核记录数据
    getCheckInfoData() {
      this.ajaxData(
        {
          type: "get",
          url: "/company/auditor/allcompany",
          data: {
            page: 1,
            pageSize: 30
          }
        },
        res => {
          this.checkInfoData = res;
          this.totalCount = Math.ceil(this.checkInfoData[0].totalCount/30);
        }
      );
    },
    handlePage(value){
      this.pageNum = value;
      this.getPageDate();
    },
    handlePageSize(value) {  
      this.pageSize = value
      this.getPageDate();
    },
    getPageDate(){
      this.ajaxData(
        {
          type: "get",
          url: "/company/auditor/allcompany",
          data: {
            page: this.pageNum,
            pageSize: 30
          }
        },
        res => {
          this.checkInfoData = res;
          console.log(res);
        }
      );
    },
    // 搜索功能
    searchCheck() {
      let companyname = this.company1;
      let status = this.model1;
      let startDate = this.startDate / 1000;
      let endDate = this.endDate /1000;
      if (companyname != "" && status == "" && startDate == "") {
        this.ajaxData(
          {
            type: "get",
            url: "/company/auditor/allcompany",
            data: {
              page: 0,
              pageSize: 100000,
              companyname: companyname
            }
          },
          res => {
            this.checkInfoData = res;
          }
        );
      } else if (companyname == "" && status != "" && startDate == "") {
        this.ajaxData(
          {
            type: "get",
            url: "/company/auditor/allcompany",
            data: {
              page: 0,
              pageSize: 100000,
              status: status
            }
          },
          res => {
            this.checkInfoData = res;
          }
        );
      } else if (companyname == "" && status == "" && startDate != "") {
        this.ajaxData(
          {
            type: "get",
            url: "/company/auditor/allcompany",
            data: {
              page: 0,
              pageSize: 100000,
              startDate: startDate,
              endDate: endDate
            }
          },
          res => {
            this.checkInfoData = res;
          }
        );
      } else if (companyname != "" && status != "" && startDate == "") {
        this.ajaxData(
          {
            type: "get",
            url: "/company/auditor/allcompany",
            data: {
              page: 0,
              pageSize: 100000,
              companyname: companyname,
              status: status
            }
          },
          res => {
            this.checkInfoData = res;
          }
        );
      } else if (companyname == "" && status != "" && startDate != "") {
        this.ajaxData(
          {
            type: "get",
            url: "/company/auditor/allcompany",
            data: {
              page: 0,
              pageSize: 100000,
              status: status,
              startDate: startDate,
              endDate: endDate
            }
          },
          res => {
            this.checkInfoData = res;
          }
        );
      } else if (companyname != "" && status == "" && startDate != "") {
        this.ajaxData(
          {
            type: "get",
            url: "/company/auditor/allcompany",
            data: {
              page: 0,
              pageSize: 100000,
              companyname: companyname,
              startDate: startDate,
              endDate: endDate
            }
          },
          res => {
            this.checkInfoData = res;
          }
        );
      } else if (companyname != "" && status != "" && startDate != "") {
        this.ajaxData(
          {
            type: "get",
            url: "/company/auditor/allcompany",
            data: {
              page: 0,
              pageSize: 100000,
              companyname: companyname,
              status: status,
              startDate: startDate,
              endDate: endDate
            }
          },
          res => {
            this.checkInfoData = res;
          }
        );
      } else if (companyname == "" && status == "" && startDate == "") {
        this.ajaxData(
          {
            type: "get",
            url: "/company/auditor/allcompany",
            data: {
              page: 0,
              pageSize: 100000
            }
          },
          res => {
            this.checkInfoData = res;
          }
        );
      }
    },
    // 获取企业详细信息
    getCompanyData(id) {
      this.companyInfoModal = true;
      this.ajaxData(
        {
          type: "get",
          url: "/company/auditor/companydetail",
          data: {
            companyId: id
          }
        },
        res => {
          this.targetCompanyData = res[0];
        }
      );
    },
    getFiles(url){
      window.open(url);
    },
    showAuditorReason(data){
      this.auditorReasonModel = true
      this.auditorReasonData = data;
    },
    ok() {},
    cancel() {}
  },
  created() {
    this.getCheckInfoData();
  }
};
</script>
